// 导出订单
<template>
  <el-dialog title="" :visible.sync="centerDialogVisible" width="818px" center>
    <div class="header">
      <div class="top"><span>导出订单</span></div>
      <div class="center">
        <table class="center_line">
          <tr>
            <td>报表类型：</td>
            <td>标准报表</td>
          </tr>
          <tr>
            <td>报表格式：</td>
            <td>Excel格式</td>
          </tr>
          <tr>
            <td class="center_top">报表字段：</td>
            <td>
              <div class="center_div">
                <div class="divlist">
                  <div>订单编号</div>
                  <div>下单时间</div>
                  <div>订单来源</div>
                  <div>订单状态</div>
                </div>
                <div class="divlist">
                  <div>订单编号</div>
                  <div>下单时间</div>
                  <div>订单来源</div>
                  <div>订单状态</div>
                </div>
              </div>
            </td>
          </tr>
        </table>
        <div class="statistics">共20个字段</div>
      </div>
      <div class="bottom">
        <el-button @click="closeAssembly">取消</el-button>
        <button @click="successAssembly">导出</button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Popup",
  data() {
    return {
      centerDialogVisible: false,
    };
  },
  methods: {
    closeAssembly(){
      this.centerDialogVisible = false;
    },
    successAssembly(){
      this.$message({
        type:'success',
        message:'导出成功!'
      })
      this.centerDialogVisible = false;
    }
  },
};
</script>

<style scoped>
/**********************************************************header*************************************************************************** */
.header {
  margin: 0 auto;
  padding: 0;
}
/**********************************************************top*************************************************************************** */
.header .top {
  height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #686868;
}
/**********************************************************center*************************************************************************** */
.center {
  width: 740px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #484848;
}
.center .center_line {
  line-height: 54px;
}
.center .center_top {
  vertical-align: text-top;
}
.center .center_div {
  width: 633px;
  border: 2px solid #E7E7E8;
  padding: 15px;
  margin-top: 15px;
  border-radius: 7px;
  overflow:hidden;
}
.center .center_div .divlist{
  margin: 0px 10px;
}
.center .center_div .divlist div{
  width: 143px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin: 5px;
  float: left;
  background-color: #E7E7E8;
}
.center .statistics {
  margin: 10px 80px;
}
/**********************************************************bttom*************************************************************************** */
.bottom {
  width: 637px;
  margin: 0 auto;
  padding: 30px;
  text-align: right;
}
.bottom button{
  /* cursor: pointer; */
  font-size: 0.875rem;
}
.bottom button:nth-child(1) {
  width: 100px;
  height: 38px;
}
.bottom button:nth-child(2) {
  width: 100px;
  height: 38px;
  color: #fff;
  border: rgb(67, 106, 242);
  background: rgb(67, 106, 242);
  border-radius: 5px;
}

</style>